<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="4" :offset="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input style="width:220px" v-model="selectCode" placeholder="请输入商家名称/联系人/手机号码查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="2" :offset="22">
            <el-button type="success" @click="exports">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="userRealName" label="用户名" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userIdCard" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="userMargin" label="保证金" align="center"></el-table-column>
        <el-table-column prop="refundReason" label="退还原因" align="center"></el-table-column>
        <el-table-column prop="refundCreateTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="refundStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.refundStatus == 1 ? '待审核' : scope.row.refundStatus == 2 ? ' 已通过' : '未通过' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.refundStatus == 1 " @click="shenHe(scope.row)" type="primary" size="small">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :current-page="current"
          @current-change="handleCurrentChange"
          style="margin-top:24px"
      ></el-pagination>
    </el-card>
    <el-dialog
        title="审核"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="resource">
          <el-radio-group @change="radioChange" v-model="ruleForm.resource">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="jujueIsShow" prop="reviewReason">
          <el-input placeholder="请输入拒绝原因" v-model="ruleForm.reviewReason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="shenHeSubmit('ruleForm')"> 确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {export2Excel} from "@/components/commom";

export default {
  name: "helperlist",
  data() {
    return {
      dialogVisible: false,
      jujueIsShow: false,
      ruleForm: {
        name: '',
        resource: '',
        reviewReason: ""
      },
      rules: {
        resource: [
          {required: true, message: '请选择审核状态', trigger: 'change'}
        ],
        reviewReason: [
          {required: true, message: '请填写拒绝理由', trigger: 'blur'}
        ]
      },
      options: [{
        value: 1,
        label: '待审核'
      }, {
        value: 2,
        label: '已通过'
      }, {
        value: 3,
        label: '未通过'
      }],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      merchantTotal: {}, //商家统计信息
      total: 0, //总条数
      size:10,
      current: 1, //第一页的数据加载
      selectCode: "", //查询条件
      selectCode1: "",
      firstdata: "", //开始时间
      endtime: "" //结束时间
    };
  },
  mounted() {
    this.getHelperlist()
  },
  methods: {
    // 获取商户列表
    getHelperlist() {
      let param = {
        size: this.size,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getBZJ(param).then(res => {
        this.tableData = res.result.records; //加载数据
        this.total = res.result.total; //总条数
        console.log("获取商户列表", this.tableData);

      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getHelperlist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getHelperlist();
    },
    // 重置功能
    reset() {
      this.selectCode = ""; //查询条件
      this.selectCode1 = ""; //查询条件
      this.value1 = ""; //开始时间
      this.value = ""
      // 重新加载数据
      this.getHelperlist();
    },
    radioChange() {
      console.log(this.ruleForm.resource)
      if (this.ruleForm.resource == 3) {
        this.jujueIsShow = true
      } else {
        this.jujueIsShow = false
      }
    },
    shenHe(row) {
      this.dialogVisible = true
      console.log('row', row)
      this.shenHeSubmitRow = row
    },
    shenHeSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let list = {
            userId:this.shenHeSubmitRow.userId,
            refundId:this.shenHeSubmitRow.refundId,
            refundStatus: this.ruleForm.resource,
            reviewReason: this.ruleForm.reviewReason
          }
          this.$http.article.xgBZJ(list).then(res => {
            this.ruleForm.name = ""
            this.ruleForm.resource = ""
            this.ruleForm.reviewReason = ""
            this.reset()
            this.dialogVisible = false
            this.$refs.ruleForm.resetFields()
            this.getHelperlist()
          });
        } else {
          return false;
        }
      })
    },
    handleClose() {
      for (let key in this.ruleForm) {
        this.ruleForm[key] = "";
      }
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }

      this.jujueIsShow = false
      this.dialogVisible = false
    },
    //   导出
    exports() {
      console.log("导出");
      this.getHelperlist();
      const hader = [
        {
          title: "用户名",
          date: "userRealName"
        },
        {
          title: "联系电话",
          date: "userPhone"
        },
        {
          title: "姓名",
          date: "userName"
        },
        {
          title: "身份证号",
          date: "userIdCard"
        },
        {
          title: "保证金",
          date: "userMargin"
        },
        {
          title: "退还原因",
          date: "refundReason"
        },
        {
          title: "申请时间",
          date: "refundCreateTime"
        } ,
        {
          title: "状态",
          date: "refundStatus"
        }
      ];

      const excelName = "保证金退还审核";

      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getBZJ(param).then(res => {
        const list = res.result.records.map(item => {
          console.log('item',item)
          //因为有枚举类型，所以这里对数据进行处理
          if (item.refundStatus) {
            item.refundStatus =
                item.refundStatus == 1 ? "待审核" :  item.refundStatus == 2 ? ' 已通过' : '未通过';
          }
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    }

  }
}
</script>

<style scoped lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;

  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>